<script setup>
import { onMounted, ref, getCurrentInstance, toRefs, computed } from 'vue'
import { addTokenToUrl } from '../../../utils/token'
import { jumpHttp, isMobile, isWeixinMini } from '../../../utils/host'

import knowledgeIcon from '../../../assets/img/knowledge.png'
import appIcon from '../../../assets/img/app.png'
import smartIcon from '../../../assets/img/smart.png'
import systemIcon from '../../../assets/img/system.png'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination } from 'swiper/modules'
// Import Swiper styles
import 'swiper/css'
import 'swiper/css/pagination'
const modules = [Pagination]
const emits = defineEmits(['emitSend', 'emitDoc'])
const props = defineProps({
  cardType: {
    type: String,
    default: '0'
  }
})

const { cardType } = toRefs(props)
const { appContext } = getCurrentInstance()
const proxy = appContext.config.globalProperties
const config = proxy.$config
// 重组数组
const chunkArray = (arr, size) => {
  const result = []
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}
const cardTitle = computed(() => {
  if (cardType.value === '1') {
    return config.commonQatitle || '校园问答'
  } else if (cardType.value === '4') {
    return '常用应用'
  } else if (cardType.value === '3') {
    return '智能问数'
  } else if (cardType.value === '2') {
    return '制度问询'
  }
})
const cardIcon = computed(() => {
  if (cardType.value === '1') {
    return knowledgeIcon
  } else if (cardType.value === '4') {
    return appIcon
  } else if (cardType.value === '3') {
    return smartIcon
  } else if (cardType.value === '2') {
    return systemIcon
  }
})

const renderCount = ref(0)

// 常用应用tab
const apps = config.chatSubappList ? chunkArray(config.chatSubappList, 8) : []

// 校园问答tab
let hotKnowledgeArray = []
hotKnowledgeArray = config.hotKnowledgeArray || []
hotKnowledgeArray = hotKnowledgeArray.filter(
  (item) => item.knowledgeList.length
)
const initialData = ref(hotKnowledgeArray)
initialData.value.forEach((item, index) => {
  item.page = 1
  if (index === 0) {
    item.active = true
  } else {
    item.active = false
  }
})
const hotKnowledge = ref([])
const currentIndex = ref(0)
hotKnowledge.value = initialData.value[currentIndex.value]
  ? chunkArray(initialData.value[currentIndex.value].knowledgeList, 3)
  : []
const changeType = (index) => {
  renderCount.value++
  initialData.value.forEach((item) => {
    item.active = false
  })
  initialData.value[index].active = true
  currentIndex.value = index
  hotKnowledge.value = chunkArray(
    initialData.value[currentIndex.value].knowledgeList,
    3
  )
}

// 智能问数tab
let smartBIArray = []
smartBIArray = config.agentInfoArray || []
smartBIArray = smartBIArray.filter((item) => item.agentInfoList.length)
const initialSmartBIData = ref(smartBIArray)
initialSmartBIData.value.forEach((item, index) => {
  item.page = 1
  if (index === 0) {
    item.active = true
  } else {
    item.active = false
  }
})
const smartList = ref([])
const currentSmartIndex = ref(0)
smartList.value = initialSmartBIData.value[currentSmartIndex.value]
  ? chunkArray(
      initialSmartBIData.value[currentSmartIndex.value].agentInfoList,
      3
    )
  : []
const changeSamrtBIType = (index) => {
  renderCount.value++
  initialSmartBIData.value.forEach((item) => {
    item.active = false
  })
  initialSmartBIData.value[index].active = true
  currentSmartIndex.value = index
  smartList.value = chunkArray(
    initialSmartBIData.value[currentSmartIndex.value].agentInfoList,
    3
  )
}

// 制度问询tab
let systemArray = []
systemArray = config.rulesAndRegulationsArray || []
systemArray = systemArray.filter((item) => item.rulesAndRegulationsList.length)
const initialSystemData = ref(systemArray)
initialSystemData.value.forEach((item, index) => {
  item.page = 1
  if (index === 0) {
    item.active = true
  } else {
    item.active = false
  }
})
const systemList = ref([])
const currentSystemIndex = ref(0)
systemList.value = initialSystemData.value[currentSystemIndex.value]
  ? chunkArray(
      initialSystemData.value[currentSystemIndex.value].rulesAndRegulationsList,
      4
    )
  : []
const changeSystemType = (index) => {
  renderCount.value++
  initialSystemData.value.forEach((item) => {
    item.active = false
  })
  initialSystemData.value[index].active = true
  currentSystemIndex.value = index
  systemList.value = chunkArray(
    initialSystemData.value[currentSystemIndex.value].rulesAndRegulationsList,
    4
  )
}
// 点击列表
const handleClick = (item, type) => {
  // 校园问答
  if (type === 1) {
    emits('emitSend', item.name)
  }
  // 常用应用
  if (type === 4) {
    // type = 2: 点击了推荐应用
    if (!item.agentType) {
      proxy.$toast('未获取到agent类型，请检查配置')
      return
    }
    if (item.agentType === 'jump') {
      if (!item.link) {
        proxy.$toast('当前服务正在和学校建设中，请耐心等待吧')
        return
      }
      if (item.type === 4) {
        // 跳转app应用 wanxiao://......
        if (!isMobile()) {
          proxy.$toast('请在移动端使用此功能')
          return
        }
        window.location.href = item.link
      } else if (item.type === 2) {
        if (!isWeixinMini()) {
          proxy.$toast('请在微信小程序环境使用此功能')
          return
        }
        wx.miniProgram.navigateTo({
          url: item.link
        })
      } else if (item.type === 3) {
        // 跳转http链接
        item.link = !isMobile() ? item.pcLink : item.link
        const url =
          item.appendToken === 1
            ? addTokenToUrl(
                item.link,
                item.putTokenName || 'token',
                item.gainTokenName || 'token'
              )
            : item.link
        if (url === 'invalid url') {
          proxy.$toast('地址解析失败，请检查配置')
          return
        }
        jumpHttp(url)
      }
    } else if (item.agentType === 'action') {
      emits('emitSend', item.content)
    }
  }
  // 智能问数
  if (type === 3) {
    emits('emitSend', item.name)
  }
  // 制度问答
  if (type === 2) {
    emits('emitDoc', {
      id: item.documentId,
      name: item.name
    })
  }
}

onMounted(() => {})
</script>

<template>
  <div class="suggestview">
    <div class="card-header">
      <div class="left">
        <img :src="cardIcon" />
        <span>{{ cardTitle }}</span>
      </div>
      <div class="right">
        <img src="../../../assets/img/small.png" />
      </div>
    </div>
    <div class="content">
      <div class="tab tab1" v-if="cardType === '1'">
        <template v-if="initialData.length">
          <div class="type">
            <div class="tags">
              <span
                v-for="(item, index) in initialData"
                :key="index"
                class="tag"
                :class="{ act: item.active }"
                @click="changeType(index)"
                >{{ item.chatDynamicName }}</span
              >
            </div>
          </div>
          <swiper
            class="lists"
            :modules="modules"
            :pagination="{ clickable: true }"
            :loop="true"
            :key="renderCount"
            :auto-height="true"
          >
            <swiper-slide
              v-for="(item, index) in hotKnowledge"
              :key="index"
              style="min-height: 2.5rem"
            >
              <div
                class="wrap"
                v-for="(c_item, c_index) in item"
                :key="c_index"
              >
                <div class="item" @click="handleClick(c_item, 1)">
                  <span class="c oneline">{{ c_item.name }}</span>
                  <!-- <span class="next" /> -->
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </template>
        <template v-else>
          <div class="empty">
            <img src="../../../assets/img/empty.png" />
            <span>暂无内容</span>
          </div>
        </template>
      </div>
      <div class="tab tab2" v-if="cardType === '4'">
        <template v-if="apps.length">
          <swiper
            class="app"
            :modules="modules"
            :pagination="{ clickable: true }"
            :loop="true"
          >
            <swiper-slide
              v-for="(item, index) in apps"
              :key="index"
              :auto-height="true"
              style="min-height: 3rem"
            >
              <van-grid
                :column-num="4"
                :border="false"
                :gutter="8"
                icon-size="0.76rem"
              >
                <van-grid-item
                  v-for="(c_item, c_index) in item"
                  :key="c_index"
                  :icon="c_item.icon ? c_item.icon : appIcon"
                  :text="c_item.name"
                  @click="handleClick(c_item, 4)"
                />
              </van-grid>
            </swiper-slide>
          </swiper>
        </template>
        <template v-else>
          <div class="empty">
            <img src="../../../assets/img/empty.png" />
            <span>暂无内容</span>
          </div>
        </template>
      </div>
      <div class="tab tab1" v-if="cardType === '3'">
        <template v-if="initialSmartBIData.length">
          <div class="type">
            <div class="tags">
              <span
                v-for="(item, index) in initialSmartBIData"
                :key="index"
                class="tag"
                :class="{ act: item.active }"
                @click="changeSamrtBIType(index)"
                >{{ item.chatDynamicOneName }}</span
              >
            </div>
          </div>
          <swiper
            class="lists"
            :modules="modules"
            :slides-per-view="1"
            :pagination="{ clickable: true }"
            :loop="true"
            :key="renderCount"
          >
            <swiper-slide
              v-for="(item, index) in smartList"
              :key="index"
              style="min-height: 2.5rem"
            >
              <div
                class="wrap"
                v-for="(c_item, c_index) in item"
                :key="c_index"
              >
                <div class="item" @click="handleClick(c_item, 3)">
                  <span class="c oneline">{{ c_item.name }}</span>
                  <!-- <span class="next" /> -->
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </template>
        <template v-else>
          <div class="empty">
            <img src="../../../assets/img/empty.png" />
            <span>暂无内容</span>
          </div>
        </template>
      </div>
      <div class="tab tab1" v-if="cardType === '2'">
        <template v-if="initialSystemData.length">
          <div class="type">
            <div class="tags">
              <span
                v-for="(item, index) in initialSystemData"
                :key="index"
                class="tag"
                :class="{ act: item.active }"
                @click="changeSystemType(index)"
                >{{ item.dynamicDocName }}</span
              >
            </div>
          </div>
          <swiper
            class="lists"
            :modules="modules"
            :pagination="{ clickable: true }"
            :loop="true"
            :key="renderCount"
          >
            <swiper-slide
              v-for="(item, index) in systemList"
              :key="index"
              style="min-height: 2.5rem"
            >
              <div
                class="wrap"
                v-for="(c_item, c_index) in item"
                :key="c_index"
              >
                <div class="item" @click="handleClick(c_item, 2)">
                  <span class="c oneline">{{ c_item.name }}</span>
                  <!-- <span class="next" /> -->
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </template>
        <template v-else>
          <div class="empty">
            <img src="../../../assets/img/empty.png" />
            <span>暂无内容</span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.suggestview {
  background: white;
  border-radius: 0.32rem;
  font-size: 0.28rem;
  margin-bottom: 0.2rem;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem 0 0.32rem;
    background: #fafafa;
    border-radius: 0.32rem 0.32rem 0 0;
    height: 0.8rem;
    background: linear-gradient(274deg, #c1e2ff 0%, #dcefff 100%);
    box-shadow: inset 0px 0.02rem 0.16rem 0px rgba(13, 85, 255, 0.09);
    .left {
      height: 0.4rem;
      display: flex;
      align-items: center;
      font-size: 0.32rem;
      color: #2d4662;
      img {
        height: 0.32rem;
        width: 0.31rem;
        margin-right: 0.06rem;
      }
    }
    .right {
      height: 0.8rem;
      display: flex;
      align-items: end;
      img {
        height: 0.74rem;
        width: 0.74rem;
        position: relative;
        top: -0.03rem;
      }
    }
  }
  .content {
    width: 100%;
    height: auto;
    background: #fff;
    // padding-top: 0.15rem;
    overflow: hidden;
    border-radius: 0.14rem;
  }
  :deep(.van-swipe__indicator) {
    background-color: #d8d8d8;
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    img {
      width: 2rem;
      height: auto;
    }
    span {
      color: #999;
      font-size: 0.2rem;
    }
  }
}
.tab {
  min-height: 2.6rem;
  .van-swipe-item {
    height: auto;
  }
}
.tab1 {
  height: 100%;
  padding: 0.12rem 0.12rem 0 0.12rem;
  .type {
    display: flex;
    align-items: center;
    color: #666;
    position: relative;
    .tags {
      flex: 1;
      overflow-x: scroll;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      position: relative;
      .tag {
        padding: 0 0.2rem;
        word-break: keep-all;
        white-space: nowrap;
        margin-right: 0.32rem;
        color: #323233;
        font-weight: 400;
        position: relative;
        height: 0.52rem;
        background: #d9efff;
        border-radius: 0.26rem;
        line-height: 0.52rem;
        font-size: 0.24rem;
        background: #f5f5f5;
      }
      .act {
        background-color: #d9efff;
        font-weight: 500;
      }
      .tag:last-child {
        margin-right: 0;
      }
    }
    .tags:hover::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  .lists {
    width: 100%;
    color: #333;
    font-size: 0.28rem;
    // margin-top: 0.06rem;
    padding-bottom: 0.36rem;
    .wrap {
      display: flex;
      align-items: center;
      .item {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
        border-bottom: 0.5px solid #eee;
        overflow: hidden;
        height: 0.8rem;
        line-height: 0.8rem;
        .c {
          position: relative;
          flex: 1;
          font-weight: 400;
          font-size: 0.28rem;
          color: #56616c;
        }
        .next {
          width: 0.44rem;
          height: 0.44rem;
          background-image: url('../../../assets/img/search.png');
          background-size: 100% 100%;
        }
      }
      &:last-child {
        .item {
          border: none;
        }
      }
    }
  }
}
.tab2 {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: flex-start;
  padding: 0 0.16rem;
  .app {
    :deep(.van-grid-item__content) {
      padding: 0.24rem 0;
      .van-grid-item__text {
        font-weight: 500;
        font-size: 0.24rem;
        color: #546275;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
      }
    }
    padding-bottom: 0.36rem;
  }
}
</style>
